<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Placebook</title>
	<link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" media="screen" />
	<link rel="stylesheet" type="text/css" href="geo-autocomplete/lib/jquery.autocomplete.css" />
	<link type="text/css" href="general.css" rel="stylesheet" />
	<script type="text/javascript" src="development-bundle/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.8.22.custom.js"></script>
	<script type="text/javascript" src="jquery-validation-1.9.0/jquery.validate.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="js/infobubble.js"></script>
	
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDgJFhcrOUO9PuytlqOiH4YIAioQq3sj00&amp;sensor=false&amp;region=IL"></script>
	<script type="text/javascript" src="geo-autocomplete/lib/jquery.autocomplete_geomod.js"></script>
	<script type="text/javascript" src="geo-autocomplete/geo_autocomplete.js"></script>
	<script type="text/javascript" src="js/markerclusterer.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	</head>
	<body>
		<div id="topbar_container">
			<div id="topbar">
				<div class="logged_topbar_container">
					<div class="logged_topbar">
						<a title="Go to Placebook Home" href="" class="lfloat">
							<i class="PlacebookLogo">
								<img src="img/placebook.JPG" alt="Placebook"/>
							</i>
						</a>
						<div class="topbar_search_container">
							<input type="text" id="location" class="lfloat" value="Search for an address..." />
						</div>
						<div class="logout_container">
							<button id="logout_button" class="lfloat">Logout</button>
						</div>
					</div>
				</div>					
			</div>
		</div>
		<div id="map" style="width:85%; height:100%" class="rfloat">
			<div id="status-bar" class="ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default" >
				<table>
					<tr>
					<td><b><u>Map Center Information: </u></b></td>
					<td><b>  Zoom Level</b></td><td><div id="zoom_level">2</div></td>
					<td><b>  Address:</b></td><td><div id="formatedAddress"></div></td>
					<td><b>  Lat/Lng:</b></td><td><div id="latlng"></div></td></tr>
				</table>
			</div>
			<div id="map_canvas" ></div>	
		</div>
		
		
		<div id="accordion_container" style="width:15%; height:100%" class="lfloat"> 
			<h3 id="welcome" class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top"></h3>
			<div id="multiaccordion">
				<h3><a href="#">My Settings</a></h3>
				<div class="settings_container">
					<div class="show_users_container">
						<div id="users-form" title="Placebook's Users">
							<div id="users"></div>
						</div>
						<button id="show-users">See All Users</button>	
					</div>
					<div class="view_settings_container">
						<p id="view-settings">View Settings</p>
						<hr/><br/>
						<div class="show_past_events_container">
						<input type="checkbox" id="show-past-events" /><label for="show-past-events">Show Past Events</label>
						</div>
						<br/>
						<div class="since_date_container">
							<div id="since-date" title="Show events\messages since date">
								<label for="sincedate" >Show events\messages since:</label>
								<table id="set-since-table" align="center">
									<tr>
										<td colspan='2'><input class="lfloat" type="text" name="sincedate" id="sincedate" value=""/></td>
									</tr>
									<tr>
										<td><button id="set-since">Set</button></td>
										<td><button id="since-reset">Reset</button></td>
									</tr>
								</table>
							</div>	
						</div>
					</div>
					<br/>
					<div class="account_settings_container">
						<p id="account-settings">Account Settings</p>
						<hr/><br/>
 						<div id="delete-me-form" title="Delete My Account">
 							<p>Are you wish to delete your account and all your messages? It cannot be undone!</p>
								<fieldset>
									<label for="password">Please enter your password:</label>
									<input type="password" id="password" name="password" class="text ui-widget-content ui-corner-all" />
								</fieldset>
						</div>
						<button id="delete-me">Delete My Account</button>	
					</div>
				</div>
				<h3><a href="#">Search Web Service</a></h3>
				<div class="ws_container">
					<p>Choose type of search:</p>
					<div class="ws_location_container">
						<div id="ws-location-form" title="Location Based Search">
							<p>Going to search around the current map center according to the given radius.</p>
								<fieldset>
									<label for="radius">Radius In Meters:</label>
									<input type="text" name="radius" id="radius" value="" class="text ui-widget-content ui-corner-all" />
								</fieldset>
						</div>
						<button id="ws-location-search">Location Based Search</button>	
						<div id="ws-location-loading"><img src="img/loading.gif" alt="loading..."/></div>
					</div>
					<hr/>
					<div class="ws_keywords_container">
						<div id="ws-keywords-form" title="Keywords Based Search">
							<p>Going to search for messages containing the given keywords</p>
								<fieldset>
									<label for="keywords">Enter Keywords (Separated by semicolon ';'):</label>
									<input type="text" name="keywords" id="keywords" value="" class="text ui-widget-content ui-corner-all" />
								</fieldset>
						</div>
						<button id="ws-keywords-search">Keywords Based Search</button>
						<div id="ws-keywords-loading"><img src="img/loading.gif" alt="loading..."/></div>	
					</div>
					<hr/>
					<br/>
					<div class="ws_clear_container">
						<button id="clear-search-results">Clear Search Results</button>	
					</div>
					<div class="search_results_container">
						<div id="src-results-bar"></div>
					</div>
				</div>
				<h3><a href="#">Create New Message\Event</a></h3>
				<div class="create_container">
					<p>Create a new Message\Event at the center of the map:</p>
					<div class="new_msg_container">
						<div id="msg-form" title="Add a new message">
							<p>Please enter the message content:</p>
								<fieldset>
									<label for="content">Message</label>
									<input type="text" name="content" id="content" value="" class="text ui-widget-content ui-corner-all" />
								</fieldset>
						</div>
						<button id="create-msg">Create a new message</button>	
					</div>
					<hr/>
					<div class="new_event_container">
						<div id="event-form" title="Add a new event">
							<p>Please enter the event details:</p>
								<fieldset>
									<label for="info">Event Information</label>
									<input type="text" name="info" id="info" value="" class="text ui-widget-content ui-corner-all" />
									<label for="capacity">Capacity</label>
									<input type="text" name="capacity" id="capacity" value="" class="text ui-widget-content ui-corner-all" />
									<label for="time">Time</label>
									<input type="text" name="time" id="time" value="" />
								</fieldset>
						</div>
						<button id="create-event">Create a new event</button>	
					</div>
				</div>
				<h3><a href="#">Export</a></h3>
				<div class="export_container">
					<p>Generate a collective XML from events and messages</p>
					<div id="export-xml">
						<button id="export-xml-button">Export to XML</button>
					</div>
					<br/>
					<hr/>
					<p>Which KML to generate?</p>
					<div id="kml-options">
						<input type="radio" id="messages-only" name="kml-options" /><label for="messages-only">Messages</label>
						<input type="radio" id="events-only" name="kml-options" checked="checked" /><label for="events-only">Events</label>
						<input type="radio" id="path" name="kml-options" /><label for="path">Path</label>
						<p/>
					</div>
					<button id="kml-button">Generate KML</button>
				</div>
				<h3><a href="#">My Registrations</a></h3>
				<div id="my-reg-bar"></div>
				<h3><a href="#">My Messages</a></h3>
				<div id="my-msg-bar"></div>
				<h3><a href="#">My Events</a></h3>
				<div id="my-event-bar"></div>
				<h3><a href="#">Messages On Map</a></h3>
				<div id="msg-bar"></div>
				<h3><a href="#">Events On Map</a></h3>
				<div id="event-bar"></div>
			</div>
		</div>
		<div id="page_footer">
			<div class="logged_page_footer">
    			<p>Placebook by Gil Fruchter and Gal Lalouche</p>	
			</div>
		</div>
	</body>
</html>




